<!DOCTYPE html>
<html>
<head>
    <title>BootStrap模态框</title>
    <meta charset="utf-8">
    <link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="./css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <link href="../dist/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      .modal-dialog{
        width: 440px;/*控制弹出框的宽度*/
      }
    </style>
</head>

<body>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  填写用户信息
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <!--右上角的×按钮-->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <!--标题-->
        <h4 class="modal-title" id="myModalLabel">用户表单填写</h4>
      </div>
      <!--内容body-->
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label for="username" class="col-sm-3 control-label">用户名</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="username" placeholder="请输入姓名">
            </div>
          </div>
          <div class="form-group">
            <label for="userhome" class="col-sm-3 control-label">籍贯</label>
            <div class="col-sm-8">
              <select class="form-control" id="userhome"> 
                <option value="beijing">北京</option>
                <option value="guangxi">广西</option>
                <option value="shanghai">上海</option>
                <option value="neimenggu">内蒙古</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="birthday" class="col-sm-3 control-label">生日</label>
            <div>
               <div class="input-group date form_datetime col-md-8" data-link-field="dtp_input1">
                 <input class="form-control" id="birthday" type="text" readonly>
                 <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                 <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
               </div>
            </div>
          </div>
        </form>          
      </div>
      <!--内容结束-->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" id="submitbt" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="./js/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="./js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script src="./js/bootstrap-dialog.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $('.form_datetime').datetimepicker({
    format: 'yyyy-mm-dd',
    language:  'zh-CN',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 1
  });

  $("#submitbt").on("click",function(){
    var username = $("#username").val();
    var userhome = $("#userhome option:selected").text();
    var birthday = $("#birthday").val();
    if(!username){
      BootstrapDialog.show({
          title: '检验出错',
          message:"姓名不能为空！",
          closeByBackdrop: false,  // 按esc键，不能关闭
          closeByKeyboard: false, //点击页面，不能关闭
          draggable: true,  //可拖拽
          buttons: [{
              label: '关闭',
              action: function(dialog) {
                  dialog.close();
              }
          }]
      });
      return;
    }
    if(!userhome){
      BootstrapDialog.show({
          title: '检验出错',
          message:"籍贯不能为空！",
          closeByBackdrop: false,
          closeByKeyboard: false,
          draggable: true,
          buttons: [{
              label: '关闭',
              action: function(dialog) {
                  dialog.close();
              }
          }]
      });      
      return;
    }
    if(!birthday){
       BootstrapDialog.show({
          title: '检验出错',
          message:"出生日期不能为空！",
          closeByBackdrop: false,
          closeByKeyboard: false,
          draggable: true,
          buttons: [{
              label: '关闭',
              action: function(dialog) {
                  dialog.close();
              }
          }]
      });      
      return;
    }
    var alertstr = "姓名："+username+"<br>籍贯："+userhome+"<br>出生日期："+birthday;
    BootstrapDialog.show({
        title: '提交成功',
        message:alertstr,
        closeByBackdrop: false,
        closeByKeyboard: false,
        draggable: true,
        buttons: [{
            label: '关闭',
            action: function(dialog) {
                dialog.close();
            }
        }]
    });      


  });


})

</script>


</body>
</html>
